import React, {} from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
} from 'react-native';

import CommonStyles from '../../common/CommonStyles';
import SizeUtils from '../../common/SizeUtils';
import ToastUtils from '../../common/ToastUtils';
import Constants from '../../common/Constants';
import BaseComponent from '../common/BaseComponent';
import BaseItem from '../common/BaseItem';
import CommonViewPager from '../common/CommonViewPager';
import Config from '../../config';
import TImage from '../../components/TImage';
import QuanziRequestQuanziRandomListAction from '../../actions/quanzi/QuanziRequestQuanziRandomListAction';
import RequestQuanziContentAction from '../../actions/quanzi/RequestQuanziContentAction';
import QuanziSendShoucangQuanziAction from '../../actions/quanzi/QuanziSendShoucangQuanziAction';
import CommonCheckUserTypeAction from '../../actions/common/CommonCheckUserTypeAction';
const PAGE_SIZE = 8;
export default class QZ_WelcomeView extends BaseComponent  {
  constructor(props) {
    super(props);

    this.state.data = [];
    this._currentPage = 1;
    this._sendRequest = false;
  }

  componentDidMount() {
    this._requestData();
  }

  componentWillUpdate(nextProps, nextState) {
    if(nextState.isResponeUpdate === true) {
      this._sendRequest = false;
      nextState.isResponeUpdate = false;
      if(nextState.data.length === PAGE_SIZE) {
        this._currentPage += 1;
      }
      else {
        this._currentPage = 1;
        while(nextState.data.length < PAGE_SIZE) {
          nextState.data.push({isNull:true});
        }
      }
    }
  }

  render() {
    return(
      <View style={{flex: 1}}>
        <TImage source={require("../../../resource/images/quanzi/quanzi_img_banner.png")} style={{width:750, height:534}}/>
        <ScrollView style={{width:SizeUtils.getWindowSize().width,
            height:this.props.height - SizeUtils.translateDesignWidthToCode(674 + 10)}}>
          {this._renderListView()}
        </ScrollView>
        {this._renderBottomView()}
      </View>
    )
  }

  _renderListView() {
    return (
      <View style={{paddingLeft:SizeUtils.translateDesignWidthToCode(40),
          paddingRight:SizeUtils.translateDesignWidthToCode(40),
          paddingTop:SizeUtils.translateDesignHeightToCode(27)}}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#333333"}}>
            推荐圈子
          </Text>
          <View style={{flexDirection:"row", flexWrap:"wrap", paddingTop:SizeUtils.translateDesignHeightToCode(45),
              justifyContent:"space-between"}}>
            {this.state.data.map(
              (itemData, index) => {
                return this._renderItem(itemData, index);
              }
            )}
          </View>
      </View>
    )
  }

  _renderItem(itemData, index) {
    return (
      <Item data={itemData} key={index} />
    )
  }

  _renderBottomView() {
    return (
      <View
        style={{flexDirection: 'row',justifyContent:'space-between', alignItems:"center",
          width:SizeUtils.getWindowSize().width, paddingLeft:SizeUtils.translateDesignWidthToCode(40),
          paddingRight:SizeUtils.translateDesignWidthToCode(40), height:SizeUtils.translateDesignHeightToCode(140),
          borderColor:"#eeeeee", borderTopWidth:SizeUtils.translateDesignNumToCode(3),}} >
        <TouchableOpacity onPress={this._requestData.bind(this)}
          style={{ flexDirection: 'row', alignItems:"center",  height: SizeUtils.translateDesignHeightToCode(40), }}>
          <TImage style={{width:38, height:39}}
            source={require("../../../resource/images/quanzi/quanzi_btn_refresh.png")} />
          <Text style={{paddingLeft:SizeUtils.translateDesignWidthToCode(18), color: '#db3132', fontSize:SizeUtils.translateFontSizeToCode(28)}}>
              换一批
          </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this._setWelcomeTrue.bind(this)}
          style={{ flexDirection: 'row', alignItems:"center", backgroundColor: '#db3132',  borderRadius: 6,
            height: 40, padding:10}}
        >
          <Text
            style={{  color:'#ffffff', fontSize:SizeUtils.translateFontSizeToCode(28), }}
          >选好了</Text>
        </TouchableOpacity>
      </View>
    )
  }

  _setWelcomeTrue(){
    Constants.IS_WELLCOME = true;
    if(Constants.homePageCallBack){
      Constants.homePageCallBack();
    }
  }


  _requestData() {
    if(this._sendRequest == false) {
      this._sendRequest = true;
      new QuanziRequestQuanziRandomListAction().call(this, {page:this._currentPage, page_size:PAGE_SIZE});
    }
    else {
      ToastUtils.show("正在请求数据...");
    }
  }
}

class Item extends BaseItem {
  constructor(props) {
    super(props);

    this.state.isResponeUpdate = false;
    this.state.isContentUpdate = false;
    this.state.contentData = null;
  }

  componentWillUpdate(nextProps, nextState) {
    if(nextProps.data != this.props.data) {
      nextState.contentData = null;
    }
    if(nextState.isResponeUpdate) {
      nextState.isResponeUpdate = false;
      this._requestData();
    }
    if(nextState.isContentUpdate) {

    }
  }

  render() {
    return (
      <TouchableOpacity style={{height:SizeUtils.translateDesignWidthToCode(152) + SizeUtils.translateDesignHeightToCode(80),}}
          onPress={this._onPressItem.bind(this)}>
        <View style={{borderColor:"#cccccc", borderWidth:SizeUtils.translateDesignNumToCode(3),
            }}>
            {this._renderContent()}
        </View>
        <Text style={{paddingTop:SizeUtils.translateDesignHeightToCode(22), textAlign:"center",
            fontSize:SizeUtils.translateFontSizeToCode(28), color:"#333333"}}>
          {/* is_favorited */}
          {this.props.data.isNull === true ? "" : this.props.data.title}
        </Text>
      </TouchableOpacity>
    )
  }

  _renderContent() {
    if(this.props.data.isNull != true) {
      return (
        <View  style={{height:SizeUtils.translateDesignWidthToCode(152)}}>
          <TImage source={this._getShowImage()} style={{width:152, height:152}}/>
          <View style={{position:'absolute', right:SizeUtils.translateDesignWidthToCode(10),bottom:SizeUtils.translateDesignWidthToCode(10), }}>
          <TImage style={{
               width:42, height:41}}
            source={this._getSelectedImage()} />
          </View>
        </View>
      )
    }
  }

  _getShowImage() {
    if(this.props.data.image_urls && this.props.data.image_urls.length > 0) {
      return {uri:this.props.data.image_urls[0]};
    }
    else {
      return require("../../../resource/images/quanzi/_tmp/02.png");
    }
  }

  _getSelectedImage() {
    let is_favorited = this.props.data.is_favorited;
    if(this.state.contentData != null) {
      is_favorited = this.state.contentData.is_favorited;
    }
    if(is_favorited === 1) {
      return require("../../../resource/images/quanzi/quanzi_btn_h.png")
    }
    else {
      return require("../../../resource/images/quanzi/quanzi_btn_n.png");
    }
  }

  _onPressItem() {
    if(this.props.data.isNull === true) {
      return;
    }
    new CommonCheckUserTypeAction().call(this, {needLogin:true, needVerify:true}, this._onCheckIsUserCallback.bind(this))
    
  }

  _onCheckIsUserCallback(result){
    if(result) {
       new QuanziSendShoucangQuanziAction().call(this, {board_id:this.props.data.board_id});
    }
  }

  _requestData() {
    if(this.props.data.isNull === true) {
      return;
    }
    new RequestQuanziContentAction().call(this, {board_id:this.props.data.board_id});
  }
}
